<template>
  <div v-if="info">
    <div class="relative">
      <img
        class="w-full absolute left-0 top-0 z-[-1]"
        :src="`https://ossweb-img.qq.com/images/lol/web201310/skin/big10000.jpg`"
      />
      <div class="flex justify-center pt-5">
        <img
          class="
            w-6
            h-6
            rounded-full
            border-4 border-cyan-300
            z-20
            object-cover
          "
          :src="info.avatarUrl"
        />
        <div class="ml-1">
          <div class="text-xl text-zinc-50">
            {{ info.nickName }}
          </div>
          <div class="text-sm text-zinc-50">
            {{ info.phone }}
          </div>
        </div>
      </div>
      <div class="p-2 pt-3 xl:w-[30%] xl:m-auto">
        <div class="bg-white rounded overflow-hidden shadow-xl">
          <van-grid clickable>
            <van-grid-item icon="font" text="我的帖子" icon-color="#409EFF" />
            <van-grid-item
              icon="like"
              text="我的关注"
              dot
              icon-color="#FE2108"
            />
            <van-grid-item icon="star" text="我的收藏" icon-color="#08F6FE" />
            <van-grid-item
              badge="99+"
              icon="gold-coin"
              text="我的收益"
              icon-color="#AEB03F"
            />
          </van-grid>
          <van-cell @click="contactUs" title="设置" is-link icon="setting" />
          <van-cell
            @click="contactUs"
            title="联系我们"
            is-link
            icon="service"
          />
          <van-cell
            @click="contactUs"
            title="修改个人信息"
            is-link
            icon="cluster"
          />
          <van-cell @click="contactUs" title="相册" is-link icon="photo" />
          <van-cell
            @click="contactUs"
            title="意见反馈"
            is-link
            icon="comment"
          />
          <van-cell
            @click="contactUs"
            title="帮助中心"
            is-link
            icon="question"
          />
          <van-cell title="退出登录" is-link icon="smile" @click="loginOut" />
        </div>
      </div>
    </div>
    <van-overlay :show="show" @click="show = false" z-index="100">
      <div
        class="wrapper flex justify-center items-center h-full"
        @click.stop="show = false"
      >
        <img :src="Wechat" alt="" class="h-full" />
      </div>
    </van-overlay>
  </div>
</template>

<script setup>
import { Dialog } from "vant";
import "vant/es/Dialog/style";

import { ref } from "vue";
import { Toast, ImagePreview } from "vant";
import "vant/es/image-preview/style";
import router from "@/router/index.js";
const userinfo = localStorage.getItem("userinfo");
const info = ref(JSON.parse(userinfo));
const show = ref(false);
import Wechat from "@/assets/images/Wechat.jpeg";

import { isMobileTerminal } from "@/utils/flexible";
if (!userinfo) {
  Dialog.confirm({
    title: "提醒",
    message: "尚未登录,去登录?",
  })
    .then(() => {
      router.push("login");
      // on confirm
    })
    .catch(() => {
      // on cancel
    });
}
const contactUs = () => {
  if (isMobileTerminal.value) {
    ImagePreview([Wechat]);
  } else {
    show.value = true;
  }
};
const loginOut = () => {
  Dialog.confirm({
    title: "提醒",
    message: "确认退出吗?",
  })
    .then(() => {
      localStorage.removeItem("userinfo");
      Toast.success("退出登录成功");
      setTimeout(() => {
        router.push("/");
      }, 500);
      // on confirm
    })
    .catch(() => {
      // on cancel
    });
};
</script>

<style lang="scss" scoped>
</style>